import React, {Component,lazy,Suspense} from 'react';
import Header from "./Header";
import {Route,Switch,Redirect} from "react-router-dom";
import PageLoading from "../../components/PageLoading";
import KeepAlive from 'react-activation'
const Home = lazy(() => import('./Home'))
const Apple = lazy(() => import('./Apple'))
const Huawei = lazy(() => import('./Huawei'))
const Mi = lazy(() => import('./Mi'))
const Parts = lazy(() => import('./Parts'))
class Mall extends Component {
    render() {
        return (
            <KeepAlive>
            <div className='mall'>
                {/*顶部路由导航组件&搜索框*/}
                <Header/>
                <Suspense fallback={<PageLoading/>}>
                    <Switch>
                        <Route path='/mall/home' component={Home}/>
                        <Route path='/mall/apple' component={Apple}/>
                        <Route path='/mall/huawei' component={Huawei}/>
                        <Route path='/mall/mi' component={Mi}/>
                        <Route path='/mall/parts' component={Parts}/>
                        <Redirect to='/mall/home'/>
                    </Switch>
                </Suspense>

            </div>
            </KeepAlive>
        );
    }
}

export default Mall;